Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-05T02:45:05Z

Oysin: /* Adding multiple_choice_radio_spec.rb */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display`if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method <code>isvalid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are 2 correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution (Phase 1) ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===
We created an additional rspec file <code>multiple_choice_radio_spec.rb</code> to enable testing for the MultipleChoiceRadio class. We included testing for all four methods (<code>edit</code>, <code>complete</code>, <code>view_completed_question</code> and <code>isvalid</code>.

=== Why <code>isvalid</code> cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-05T02:42:00Z

Oysin: /* Final Phase Changes */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display`if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method <code>isvalid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are 2 correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution (Phase 1) ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== Why <code>isvalid</code> cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-05T02:41:30Z

Oysin: /* Our Solution */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display`if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method <code>isvalid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are 2 correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution (Phase 1) ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-05T02:40:53Z

Oysin: /* multiple_choice_checkbox.rb */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display`if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method <code>isvalid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are 2 correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-05T02:39:18Z

Oysin: /* Objectives */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display`if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method <code>isvalid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:18:17Z

Oysin: /* Objectives */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method <code>isvalid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:18:07Z

Oysin: /* Objectives */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method <code>valid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:17:58Z

Oysin: /* Objectives */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Add a new method >code>valid</code> to check the validity of inputs (question and answer texts).
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:16:50Z

Oysin: /* multiple_choice_radio.rb */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:09:19Z

Oysin: /* Testing HTML with Nokogiri */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code> where we broke down the original HTML string into smaller, more readable chunks for testing.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:08:47Z

Oysin: /* Testing HTML with Nokogiri */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza. Here's an example from <code>true_false_spec.rb</code>

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:08:14Z

Oysin: /* Testing HTML with Nokogiri */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
Testing with Nokogiri in Rspec allows us to selectively query parsed HTML to inspect certain elements. This allows us to write more targeted tests. Moreover, it allows us to write readable and expressive tests that closely resemble the behavior of Expertiza.

<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T21:05:47Z

Oysin: /* Final Phase Changes */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" "
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===
<b>Before refactoring:</b>
<pre style ="white-space: pre-wrap;">expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt"> Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr> <tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')
</pre>
<b>After refactoring:</b>
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>
=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T20:58:26Z

Oysin: /* Testing HTML with Nokogiri */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" style="margin:auto"
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===

{| class="wikitable" style="margin:auto"
|-
! Before refactoring !! After refactoring
|-
| <pre>expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt">Test question:</textarea></td></tr>
<tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr>
<tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr>
<tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')</pre> ||
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>
|}

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T20:57:53Z

Oysin: /* Final Phase Changes */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" style="margin:auto"
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
=== Testing HTML with Nokogiri ===

{| class="wikitable" style="margin:auto"
|-
! Before refactoring !! After refactoring
|-
| <pre>expect(true_false.edit).to eq('<tr><td><textarea cols="100" name="question[1][txt]" id="question_1_txt">Test question:</textarea></td></tr><tr><td>Question Weight: <input type="number" name="question_weights[1][txt]" id="question_wt_1_txt" value="1" min="0" /></td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="True" checked="checked" />True</td></tr><tr><td><input type="radio" name="quiz_question_choices[1][TrueFalse][1][iscorrect]" id="quiz_question_choices_1_TrueFalse_1_iscorrect_True" value="False" />False</td></tr>')</pre> ||
<pre>html = Nokogiri::HTML(true_false.edit)
# Test for presence of a text area for the question text
expect(html.css('textarea[name="question[1][txt]"]')).not_to be_empty
# Test for presence of an input for the question weight
expect(html.css('input[name="question_weights[1][txt]"]')).not_to be_empty
# Test for the correct number of choices
expect(html.css('input[type="radio"][name^="quiz_question_choices[1][TrueFalse]"]').size).to eq(2)</pre>
|}

=== Adding <code>multiple_choice_radio_spec.rb</code> ===

=== An explaination of why isvalid cannot be added to <code>QuizQuestion</code>'s superclass <code>Question</code> ===

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T20:50:15Z

Oysin: /* Final Phase Changes */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text</code>.

{| class="wikitable" style="margin:auto"
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
==== changes to testing hard coded html -> Nokogiri ====

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T20:49:42Z

Oysin: /* Final Phase Changes */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object. Here's an example from QuizQuestion's <code>view_question_text>/code>

{| class="wikitable" style="margin:auto"
|-
! Before refactoring !! After refactoring
|-
| <pre>def view_question_text
@html = '<b>' + txt + '</b><br />'
@html += 'Question Type: ' + type + '<br />'
@html += 'Question Weight: ' + weight.to_s + '<br />'
if quiz_question_choices
quiz_question_choices.each do |choices|
@html += if choices.iscorrect?
' - <b>' + choices.txt + '</b><br /> '
else
' - ' + choices.txt + '<br /> '
end
end
@html += '<br />'
end
@html.html_safe
end</pre> || <pre>def view_question_text
@html = "<b>#{txt}</b><br />"
@html << "Question Type: #{type} <br />"
@html << "Question Weight:#{weight.to_s} <br />"
@html << create_choices if quiz_question_choices.present?
@html.html_safe
end </pre>

Private methods:
<pre>
def create_choices
choices_html = ""
quiz_question_choices.each do |choice|
choices_html << choice_html(choice)
end
choices_html << "<br />"
choices_html
end

def choice_html(choice)
if choice.iscorrect?
" - <b>#{choice.txt}</b><br /> "
else
" - #{choice.txt}<br /> "
end
end

def all_choices_have_text?(choice_info)
choice_info.all? { |_idx, value| value[:txt].present? }
end
</pre>
|}
==== changes to testing hard coded html -> Nokogiri ====

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T20:34:53Z

Oysin: /* Final Phase Changes */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==
=== Refactoring QuizQuestion and its child classes ===
1. Extract Method
<br />
We applied the extract method to make the code more readable.
For example, in the <code> edit </code> method in MultipleChoiceRadio, we created new methods and copied the relevant code fragments from <code>edit</code> into the new methods.

<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)
@html = create_html_content
end
</pre>

Private methods:
<pre>
def create_html_content
html_content = ""
html_content << create_textarea_row
html_content << create_weight_input_row
html_content
end

def create_textarea_row
"<tr><td><textarea cols='100' name='question[#{id}][txt]' id='question_#{id}_txt'>#{txt}</textarea></td></tr>"
end

def create_weight_input_row
"<tr><td>Question Weight: <input type='number' name='question_weights[#{id}][txt]' id='question_wt_#{id}_txt' value='#{weight}' min='0' /></td></tr>"
end
</pre>

2. Replacing <code>+=</code> with <code><<</code>
In Ruby, <code><<</code> can be used a string concatenation operator. We replaced all instances of using <code>+=</code> to <code><<</code> because we are modifying an existing object <code>html</code> rather than creating a new object.
==== changes to testing hard coded html -> Nokogiri ====

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-12-04T20:14:29Z

Oysin: /* Our Solution */

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use <code>@html</code> (an instance variable) instead of <code>html</code>.

=== Final Phase Planning ===
* Further refactor quiz_question.rb and subclasses
* Currently, quiz_question.rb is a subclass of question.rb, however it does not follow the Liskov Substitution Principle because the method isvalid is not present in the superclass. By refactoring isvalid into the superclass, the entire Question hierarchy can be made more maintainable.
* Most methods of quiz_question.rb contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We plan to refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Final Phase Changes ==

=== Further Refactor <code>quiz_question.rb</code> and subclasses ===
* Currently, <code>quiz_question.rb</code> is a subclass of <code>question.rb</code>, however it does not follow the Liskov Substitution Principle because the method <code>isvalid</code> is not present in the superclass. By refactoring <code>isvalid</code> into the superclass, the entire <code>Question</code> hierarchy can be made more maintainable.

* Most methods of <code>quiz_question.rb</code> contain hard-coded HTML, which makes the code inflexible and prone to breaking, and also violates SOP. We should refactor the HTML building logic out of the methods to improve readability and maintainability. This would also make testing easier.

* The <code>edit</code> method in <code>multiple_choice_checkbox.rb</code> and <code>multiple_choice_radio.rb</code> uses the following code to generate the options: <code>[0, 1, 2, 3].each do |I|</code>. This limits the number options to exactly 4. This should be refactored to allow an arbitrary number of choices in a range.

== Testing ==
* Most existing Rspec tests for <code>quiz_question.rb</code> and child classes test for exact strings that match the HTML. These tests will break if anything about the classes are changed, therefore they are not robust tests. The tests should be refactored to test the logic of these methods rather than their exact outputs.

* In general, create additional tests after refactoring to verify that the refactored code work as intended. This includes functional testing to incorporate any additional helper classes created during the refactoring.

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023

2023-12-03T21:46:06Z

Oysin:

* [[CSC/ECE 517 Fall 2023 - E2350. Allow reviewers to bid on what to review]]
* [[CSC/ECE 517 Fall 2023 - E2351. Finish mentor management for assignments without topics]]
* [[CSC/ECE 517 Fall 2023 - E2352. Fix "Back" link on “New Late Policy” page]]
* [[CSC/ECE 517 Fall 2023 - E2353. Further refactoring and improvement of review mapping helper]]
* [[CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza]]
* [[CSC/ECE 517 Fall 2023 - E2356. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2356. Refactor review_mapping_controller.rb (Phase 2)]]
* [[CSC/ECE 517 Fall 2023 - E2357. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2358. Refactor student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2359. Refactor user_controller.rb, user.rb, and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2360. View for Results of Bidding]]
* [[CSC/ECE 517 Fall 2023 - E2360. View for Results of Bidding (Phase2)]]
* [[CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2363. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page]]
* [[CSC/ECE 517 Fall 2023 - E2365. Create a user interface for Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2387. Reimplement Teams backend (Phase 2)]]
* [[CSC/ECE 517 Fall 2023 - E2366. Reimplement assignment model and assignment controller]]
* [[CSC/ECE 517 Fall 2023 - E2366. Reimplement assignment model and assignment controller (Phase 2)]]
* [[CSC/ECE 517 Fall 2023 - E2367. Reimplement participants_controller.rb, participants.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2368. Reimplement of due_date.rb]]
* [[CSC/ECE 517 Fall 2023 - E2369. Reimplement duties controller.rb and badges controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2370. Reimplement join team requests controller]]
* [[CSC/ECE 517 Fall 2023 - E2371. Reimplement quiz_questionnaires_controller]]
* [[CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child_classes]]
* [[CSC/ECE 517 Fall 2023 - E2373. Reimplementation of teams controller]]
* [[CSC/ECE 517 Fall 2023 - E2373. Reimplement teams_controllers.rb]]
* [[CSC/ECE 517 Fall 2023 - E2374. Reimplement the Question hierarchy]]
* [[CSC/ECE 517 Fall 2023 - E2375. Reimplement Waitlists]]
* [[CSC/ECE 517 Fall 2023 - E2376. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2379. Reimplement authorization_helper.rb]]
* [[CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses]]
* [[CSC/ECE 517 Fall 2023 - E2381. Reimplement frontend for Assignments]]
* [[CSC/ECE 517 Fall 2023 - E2382. Optimizing the LatePoliciesController]]
* [[CSC/ECE 517 Fall 2023 - E2383. Grading Audit Trail]]
* [[CSC/ECE 517 Fall 2023 - E2384. Reimplement user_controller.rb, user.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2385. Create a Courses User interface in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2386. Reimplement teams_users backend]]
* [[CSC/ECE 517 Fall 2023 - E2377. Reimplement impersonating users (functionality within impersonate_controller.rb)]]
* [[CSC/ECE 517 Fall 2023 - NTX-1 Adding Snapshot Controller/API and CRDs]]
* [[CSC/ECE 517 Fall 2023 - NTX-2 Observability and Debuggability]]
* [[CSC/ECE 517 Fall 2023 - NTX-3 Usability and Security]]
* [[CSC/ECE 517 Fall 2023 - NTX-4 Extend NDB Operator capabilities to support Postgres HA]]
* [[CSC/ECE 517 Fall 2023 - G2350. Add GitLab support for using GraphQL to query user metrics 1]]
* [[CSC/ECE 517 Fall 2023 - G2352. Add GitLab support for using GraphQL to query repository information]]
* [[CSC/ECE 517 Fall 2023 - E2375. Refactor classes relating to signing up for topics]]

CSC/ECE 517 Fall 2023

2023-12-03T21:45:39Z

Oysin:

* [[CSC/ECE 517 Fall 2023 - E2350. Allow reviewers to bid on what to review]]
* [[CSC/ECE 517 Fall 2023 - E2351. Finish mentor management for assignments without topics]]
* [[CSC/ECE 517 Fall 2023 - E2352. Fix "Back" link on “New Late Policy” page]]
* [[CSC/ECE 517 Fall 2023 - E2353. Further refactoring and improvement of review mapping helper]]
* [[CSC/ECE 517 Fall 2023 - E2355. Improving Search Facility In Expertiza]]
* [[CSC/ECE 517 Fall 2023 - E2356. Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2356. Refactor review_mapping_controller.rb (Phase 2)]]
* [[CSC/ECE 517 Fall 2023 - E2357. Refactor sign_up_sheet_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2358. Refactor student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2359. Refactor user_controller.rb, user.rb, and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2360. View for Results of Bidding]]
* [[CSC/ECE 517 Fall 2023 - E2360. View for Results of Bidding (Phase2)]]
* [[CSC/ECE 517 Fall 2023 - E2361. Create a page to create and update a Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2362. Create a page to edit an Assignment's due date in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2363. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page]]
* [[CSC/ECE 517 Fall 2023 - E2365. Create a user interface for Questionnaire in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2387. Reimplement Teams backend (Phase 2)]]
* [[CSC/ECE 517 Fall 2023 - E2366. Reimplement assignment model and assignment controller]]
* [[CSC/ECE 517 Fall 2023 - E2366. Reimplement assignment model and assignment controller (Phase 2)]]
* [[CSC/ECE 517 Fall 2023 - E2367. Reimplement participants_controller.rb, participants.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2368. Reimplement of due_date.rb]]
* [[CSC/ECE 517 Fall 2023 - E2369. Reimplement duties controller.rb and badges controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2370. Reimplement join team requests controller]]
* [[CSC/ECE 517 Fall 2023 - E2371. Reimplement quiz_questionnaires_controller]]
* [[CSC/ECE 517 Fall 2023 - E2372. Reimplement_QuizQuestion_and_its_child_classes]]
* [[CSC/ECE 517 Fall 2023 - E2373. Reimplementation of teams controller]]
* [[CSC/ECE 517 Fall 2023 - E2373. Reimplement teams_controllers.rb]]
* [[CSC/ECE 517 Fall 2023 - E2374. Reimplement the Question hierarchy]]
* [[CSC/ECE 517 Fall 2023 - E2375. Reimplement Waitlists]]
* [[CSC/ECE 517 Fall 2023 - E2376. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Fall 2023 - E2379. Reimplement authorization_helper.rb]]
* [[CSC/ECE 517 Fall 2023 - E2380. Reimplement frontend for Courses]]
* [[CSC/ECE 517 Fall 2023 - E2381. Reimplement frontend for Assignments]]
* [[CSC/ECE 517 Fall 2023 - E2382. Optimizing the LatePoliciesController]]
* [[CSC/ECE 517 Fall 2023 - E2383. Grading Audit Trail]]
* [[CSC/ECE 517 Fall 2023 - E2384. Reimplement user_controller.rb, user.rb and its child classes]]
* [[CSC/ECE 517 Fall 2023 - E2385. Create a Courses User interface in ReactJS]]
* [[CSC/ECE 517 Fall 2023 - E2386. Reimplement teams_users backend]]
* [[CSC/ECE 517 Fall 2023 - E2377. Reimplement impersonating users (functionality within impersonate_controller.rb)]]
* [[CSC/ECE 517 Fall 2023 - NTX-1 Adding Snapshot Controller/API and CRDs]]
* [[CSC/ECE 517 Fall 2023 - NTX-2 Observability and Debuggability]]
* [[CSC/ECE 517 Fall 2023 - NTX-3 Usability and Security]]
* [[CSC/ECE 517 Fall 2023 - NTX-4 Extend NDB Operator capabilities to support Postgres HA]]
* [[CSC/ECE 517 Fall 2023 - G2350. Add GitLab support for using GraphQL to query user metrics 1]]
* [[CSC/ECE 517 Fall 2023 - G2352. Add GitLab support for using GraphQL to query repository information]]
* [[CSC/ECE 517 Fall 2023 - E2375. Refactor classes relating to signing up for topics]]

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-14T16:00:18Z

Oysin:

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-07T02:59:22Z

Oysin: /* Our Solution */

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T19:10:31Z

Oysin: /* Testing */

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T19:09:47Z

Oysin:

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T19:05:24Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid(choice_info)</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
<code>edit</code> in QuizQuestion
<pre>
def edit
@quiz_question_choices = QuizQuestionChoice.where(question_id: id)

@html = '<tr><td>'
@html += '<textarea cols="100" name="question[' + id.to_s + '][txt]" '
@html += 'id="question_' + id.to_s + '_txt">' + txt + '</textarea>'
@html += '</td></tr>'

@html += '<tr><td>'
@html += 'Question Weight: '
@html += '<input type="number" name="question_weights[' + id.to_s + '][txt]" '
@html += 'id="question_wt_' + id.to_s + '_txt" '
@html += 'value="' + weight.to_s + '" min="0" />'
@html += '</td></tr>'
end
</pre>
<code>edit</code> in MultipleChoiceCheckbox
<pre>
def edit
super
# for i in 0..3
[0, 1, 2, 3].each do |i|
@html += '<tr><td>'

@html += '<input type="hidden" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="0" />'

@html += '<input type="checkbox" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][iscorrect]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_iscorrect" value="1" '
@html += 'checked="checked" ' if @quiz_question_choices[i].iscorrect
@html += '/>'

@html += '<input type="text" name="quiz_question_choices[' + id.to_s + '][MultipleChoiceCheckbox][' + (i + 1).to_s + '][txt]" '
@html += 'id="quiz_question_choices_' + id.to_s + '_MultipleChoiceCheckbox_' + (i + 1).to_s + '_txt" '
@html += 'value="' + @quiz_question_choices[i].txt + '" size="40" />'

@html += '</td></tr>'
end

@html.html_safe
# safe_join(@html)
end
</pre>
* We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T19:02:48Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid()</code> in QuizQuestion.
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
* We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:55:26Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We implemented <code>isvalid()</code> to QuizQuestion
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
* We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:55:04Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

* We added <code>isvalid()</code> to QuizQuestion
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

* We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
* We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:54:48Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion
<pre>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</pre>

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:47:30Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion

def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:35:09Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion

'''
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end

'''

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:34:55Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion
'''
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
'''

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:28:08Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion
<nowiki>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</nowiki>

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:25:49Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion
<code>def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end </code>

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:25:31Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion
<code>def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end </code>

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:25:12Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion
<code>
def isvalid(choice_info)
@valid = 'valid'
@valid = 'Please make sure all questions have text' if txt == ''
@valid
end
</code>

# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:23:45Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code>isvalid()</code> to QuizQuestion.
# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:23:25Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==

There are four methods in QuizQuestion super class. edit, view_question_text, view_completed_question, and complete. These 4 (model) methods will return different html strings depends on the question type.

* <code>edit</code>: What to display` - if an instructor (etc.) is creating or editing a questionnaire (questionnaires_controller.rb)
* <code>view_question_text</code>: What to display if an instructor (etc.) is viewing a questionnaire (questionnaires_controller.rb)
* <code>complete</code>: What to display - if a student is filling out a questionnaire (response_controller.rb)
* <code>view_completed_question</code>: What to display if a student is viewing a filled-out questionnaire (response_controller.rb)

Our goals are
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

# We added <code> isvalid() </code> to QuizQuestion.
# We factored out duplicate code in <code>edit()</code> from the subclasses and placed it into the superclass QuizQuestion. Now <code>edit</code> in the subclasses inherit partially from QuizQuestion.
# We reimplemented QuizQuestion class and child classes methods to use @html (an instance variable) instead of html.

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:16:10Z

Oysin: /* Objectives */

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:15:39Z

Oysin: /* Objectives */

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T18:14:57Z

Oysin: /* Our Solution */

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

adds isvalid() to QuizQuestion
implements edit() within QuizQuestion
Reimplements QuizQuestion class and child classes methods to use @html instead of html

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T17:20:31Z

Oysin: /* Overview of the Classes */

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== true_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T17:19:19Z

Oysin: /* TrueFalse */

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== ture_false.rb ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T17:19:04Z

Oysin:

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== TrueFalse ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Our Solution ==

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T17:15:01Z

Oysin: /* UML Diagram */

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== TrueFalse ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== UML Diagram ==
[[File:E2372. Reimplement QuizQuestion and its child classes.png]]

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

File:E2372. Reimplement QuizQuestion and its child classes.png

2023-11-03T17:14:30Z

Oysin:

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T17:13:57Z

Oysin:

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== TrueFalse ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== UML Diagram ==
[

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T17:12:06Z

Oysin: /* Overview of the Classes */

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* <code>edit</code>: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* <code>complete method</code>: renders HTML for the user to complete this type of question in a quiz interface
* <code>view_completed_question</code>: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* <code>isvalid</code>: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* <code>edit</code>: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* <code>complete</code>: allows users to complete the question, displaying checkboxes for them to select their answers
* <code>view_completed_question</code>: shows correct answers and whether the user's selections were correct
* <code>isvalid</code>: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== TrueFalse ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* <code>edit</code>: includes HTML radio buttons specifically for 'True' and 'False' options
* <code>complete</code>: render the true/false question for the user to answer
* <code>view_completed_question</code>: displays the correct answer and the user's answer
* <code>isvalid</code>: checks to ensure that the question has text and that a correct answer is designated

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)

CSC/ECE 517 Fall 2023 - E2372. Reimplement QuizQuestion and its child classes

2023-11-03T17:11:27Z

Oysin: /* quiz_question.rb */

== Introduction ==

== Objectives ==
# Make a complete UML diagram for these classes with their attributes, methods, and class methods.
# Check all implementations of instance methods, extract duplicated codes, and put them into the highest-level class.
# Thoroughly test the QuizQuestion class

== Overview of the Classes ==
=== quiz_question.rb ===
QuizQuestion is a base class used to represent a question in a quiz. It inherits from the Question class. This class is associated with QuizQuestionChoice objects through a has_many relationship, indicating that a QuizQuestion can have multiple choices. It handles the creation of HTML for different views related to a question, such as editing, completing, and viewing the question text.

Methods:

* <code>edit</code>: to generate the HTML form for editing a question,
* <code>complete</code>: used for completing the question in the quiz
* <code>view_question_text</code>: to display the question and its choices)
* <code>view_completed_question</code>: abstract method used after quiz has been submitted, and
* <code>isvalid</code>: to validate the question, especially ensuring it has text

=== multiple_choice_radio.rb ===
This class extends QuizQuestion and represents a multiple-choice question where the participant can select only one answer from a set of radio buttons.

Methods:
* edit: overridden to add HTML for a set of radio buttons that allows the user to select one choice as the correct answer; also includes text inputs for the choices' text
* complete method: renders HTML for the user to complete this type of question in a quiz interface
* view_completed_question: displays the correct answer, the user's answer, and visual feedback on whether the user's answer was correct
* isvalid: extended to ensure that not only does each choice have text, but also that exactly one correct answer is selected

=== multiple_choice_checkbox.rb ===
The MultipleChoiceCheckbox class is a subclass of QuizQuestion and represents a multiple-choice question where the participant can select multiple answers through checkboxes.

Methods:

* edit: add HTML input elements for checkboxes, allowing multiple correct answers to be selected, along with text inputs for entering the choices.
* complete: allows users to complete the question, displaying checkboxes for them to select their answers
* view_completed_question: shows correct answers and whether the user's selections were correct
* isvalid: validates the question, ensures there are multiple correct answers if it's a checkbox question.

=== TrueFalse ===
This class also extends QuizQuestion and is specialized for true/false questions.

Methods:
* edit: includes HTML radio buttons specifically for 'True' and 'False' options
* complete: render the true/false question for the user to answer
* view_completed_question: displays the correct answer and the user's answer
* isvalid: checks to ensure that the question has text and that a correct answer is designated

== Testing ==

== Relevant Links ==

'''Github repository: ''' https://github.com/opheliasin/expertiza

'''Pull request: '''https://github.com/expertiza/expertiza/pull/2682

== Team ==
'''Mentor'''

Aditi Vakeel

'''Members'''

Nathan Sudduth (ncsuddut@ncsu.edu)

Ophelia Sin (oysin@ncsu.edu)

Yi Chen (ychen282@ncsu.edu)