Teammates: Instuctor : Feedback Questions : MCQ/MSQ questions : Disable drop down menu by default

[sukanta-27]

Environment
master branch

Steps to reproduce:

• Login as Instructor
• Create a new session or edit an existing one
• Click on Add new questions
• Select MCQ/MSQ question
• The checkbox for Or, generate options from the list of all is not be selected by default but the drop down menu will be enabled, where as the other options Max number of * and Min number of * will be disabled as usual (In case of MSQ question):
  
• Now select the checkbox and then deselect it
• The drop down menu is now disabled (as it should be in the first place) :
  

Expected behaviour: The drop down menu should be disabled by default and only get enabled when that option is selected.

Actual behaviour: The menu is enabled immediately after adding the questions, and gets disabled after we select-deselect the checkbox. or when we Edit the question after saving it.

[tshradheya]

I could not reproduce this error. Everything works as expected for me

[sukanta-27]

@tshradheya Checked both MCQ/MSQ? Added a new question or did you edit a existing one?

[tshradheya]

Sorry my bad. Could reproduce this error.
I think I forgot to run npm run build and I was on my old branch :P

[OlhaHn]

I would like to take it

[tshradheya]

Need to investigate why doesn't it get disabled when this method gets executed on making a new question

https://github.com/TEAMMATES/teammates/blob/2ed552ed0950836a726fc0a8f16ad71ef5ae174a/src/main/webapp/dev/js/common/questionMcq.js#L56-L71

Line 67 should be disabling it.

[sukanta-27]

Line 67 should be disabling it

Was looking into it yesterday. The same question came to my mind. Further investigation is needed indeed.

[bqnguyen94]

The problem is here:
https://github.com/TEAMMATES/teammates/blob/2ed552ed0950836a726fc0a8f16ad71ef5ae174a/src/main/webapp/dev/js/main/instructorFeedbackEdit.js#L540-L541
If you look closely, you will see the closing brackets on both lines are placed wrongly, therefore toggleMcqGeneratedOptions and toggleMsqGeneratedOptions receive an undefined questionNum.

[sukanta-27]

@bqnguyen94 Checked. The problem was definitely on those lines. Great finding that. :+1:
If you want you can submit a PR for it, if @tshradheya is not working on it.

[bqnguyen94]

Noted 👍 How about @OlhaHn ?

[OlhaHn]

@bqnguyen94 you can create a PR, I have not started working on it yet

[sukanta-27]

@bqnguyen94 @OlhaHn Sorry missed https://github.com/TEAMMATES/teammates/issues/8576#issuecomment-370091522 completely!!! :man_facepalming:

[tshradheya]

I will just submit a quick fix right now. ( That bracket was actually my fault in one of my latest PR) :(

[tshradheya]

@bqnguyen94 @sukanta-27 I made the bracket change and the questionNum is no longer undefined.

However, it has caused a regression. Which is, if I add a question, click on checkbox to genereate options from students and then cancel the question. Now on adding the same question again, it shows the mcqChoiceTable and also the checkbox as checked.

I tried to investigate why the toggleMcqGeneratedOptions(checkbox, questionNum) is unable to disable the choiceTable when the checkbox is checked.

Surprisingly this is what I found.

If I modified code to the following for instructorFeedbackEdit.js

    if ($(`#generateMcqOptionsCheckbox-${NEW_QUESTION}`).prop('checked')) {
        alert("checked outside");
    } else {
        alert("unchecked outside");
    }

    toggleMcqGeneratedOptions($(`#generateMcqOptionsCheckbox-${NEW_QUESTION}`), NEW_QUESTION);
    toggleMsqGeneratedOptions($(`#generateMsqOptionsCheckbox-${NEW_QUESTION}`), NEW_QUESTION);

and inside the toggleMcqGeneratedOptions() function I wrote the following

function toggleMcqGeneratedOptions(checkbox, questionNum) {
    alert(questionNum);
    if (checkbox.checked) {
        alert("checked inside function");
        $(`#mcqChoiceTable-${questionNum}`).find('input[type=text]').prop('disabled', true);
        $(`#mcqChoiceTable-${questionNum}`).hide();
        $(`#mcqGenerateForSelect-${questionNum}`).prop('disabled', false);
        $(`#mcqOtherOptionFlag-${questionNum}`).closest('.checkbox').hide();
        $(`#generatedOptions-${questionNum}`).attr('value',
                $(`#mcqGenerateForSelect-${questionNum}`).prop('value'));
    } else {
        alert("unchecked inside function");
        $(`#mcqChoiceTable-${questionNum}`).find('input[type=text]').prop('disabled', false);
        $(`#mcqChoiceTable-${questionNum}`).show();
        $(`#mcqGenerateForSelect-${questionNum}`).prop('disabled', true);
        $(`#mcqOtherOptionFlag-${questionNum}`).closest('.checkbox').show();
        $(`#generatedOptions-${questionNum}`).attr('value', 'NONE');
    }
}

Then on the second time of adding the question ( supposing I checked the box on the first time and canceled the question)
I will get alert of checked outside and unchecked inside function when the checkbox is actually checked in the webpage.

Which means, .prop('checked') returns true whereas checkbox.checked returns undefined

Any of you have any idea why this would happen?

P.S. I have fixed the problem by using $(checkbox).prop('checked') inside the toggle...() functions

[bqnguyen94]

P.S. I have fixed the problem by using $(checkbox).prop('checked') inside the toggle...() functions

Lol I guess since checkbox is a jQuery object .checked wouldn't work on it. You can use $(checkbox)[0] to get the DOM element.

[tshradheya]

.checked works fine when the checkbox is toggled after adding the question. Its only when the question is being added that it returns undefined.
This works as expected on jquery objects as well : $(checkbox).prop('checked')

[bqnguyen94]

Here
https://github.com/TEAMMATES/teammates/blob/2ed552ed0950836a726fc0a8f16ad71ef5ae174a/src/main/resources/feedbackQuestionMcqEditFormTemplate.html#L35-L40
I guess the checkbox toggling works afterward is because this here is the DOM element.