InstructorFeedbackEditPage: include question type help in lightbox

[craaaa]

Description of feature/enhancement At the moment, clicking the info button (shown above) when trying to add a new question in the Edit Feedback Session screen opens instructorHelp.jsp#fbQuestionTypes in a new tab. While this is workable, it might be more beneficial to instructors' workflow to have information on question types available on the same page, for example in a lightbox as shown below:

Justification Instructors will benefit from not having to navigate away from the page to learn more about question types. The current info button opens a new tab in the background. This impedes workflow as the user must navigate away from the page, read the information, then navigate back to the page to continue. Users may also get distracted by the (vey comprehensive) information available on instructorHelp.jsp.

Moreover, we are already using lightboxes in other parts of the site when displaying additional information; we should standardize what behaviour is expected when the user clicks on the information icon (i.e. lightbox vs. new tab).

To be fair, the question type help is quite long and elaborate, and may not fit well in a lightbox -- we may want to look into including a condensed version instead.

[damithc]

Good suggestion. We need to figure out how to implement it without duplication of instructions in two places.

[wenmogu]

Something like this?

For the pic above I extracted the info for that specific type of question and reused it in both InstructorHelp and that modal.

[craaaa]

I was thinking of a single light box to replace the info button that is currently there, but this seems like it could be a good solution too. It is more succinct, which is helpful since the question type help section is pretty long. Can you stage the changes?

Also, when you say extracted do you mean that both pages refer to the same source?

[damithc]

Some things to note:

• An instructor may need to see details of multiple question types to decide which type fits her needs. That scenario favors showing info of all question types in one page, possibly with a hyperlinked table of contents at the top.
• Having read the explanations and having chosen a question type, the instructor still may want to refer the details of the question type while filling out the question details. This scenario favors opening the details in a new window/tab rather than as a modal.
• It may be useful to have an info icon for each type in the drop down (e.g., it can open the help in a new window but auto-scroll to the relevant question type) as proposed in the screenshot above, if there is no danger of the user clicking on the info icon when she means to choose the question type instead.

[wenmogu]

What about this: ^in comparison to the first design, theres no info sign from each list item (and this is the original design of the website i.e. i dont touch it at all)

^clicking on the info button in the first pic will give this modal

^some detail of the roadmap modal

^clicking on each question type will give a modal containing the corresponding help info. Clicking the arrow sign will lead the user back to the roadmap modal

[wenmogu]

Also, when you say extracted do you mean that both pages refer to the same source?

@craaaa Yes, it means I extract the help info for each question type into tags, and use them in both instructorHelpSessions.jsp(the new tab help page) and newQuestionForm.tag (the new question forms appear in the page in the above pics)

[whipermr5]

@wenmogu +1 to the extraction of tags! :+1: https://github.com/TEAMMATES/teammates/issues/7604#issuecomment-311557171

[damithc]

I'm still not sure a modal is the way to go. for one thing, our UI mockups in the help page are meant to display in a full width page. They may not fit a modal window nicely. For another, it is hard to go back and forth between the help page and the actual form if you open it as a modal window. I think opening in a new window/tab is better.

[craaaa]

@damithc Which parts of the question help information do you think users would want to refer back to? There's usually just a few lines of explanation text followed by a sample question to show the format of the question. The sample question shown is identical to what the user will see once they add the question, so we're not sure which additional information in the help page users may need to refer to once they choose and add a question.

For us, the expected use case of the info button is for users to preview what each question type will look like before they choose to add a question -- once they choose to add the question, the information to fill out the question should be available in the question form itself.

[damithc]

@damithc Which parts of the question help information do you think users would want to refer back to? There's usually just a few lines of explanation text followed by a sample question to show the format of the question. The sample question shown is identical to what the user will see once they add the question, so we're not sure which additional information in the help page users may need to refer to once they choose and add a question.

For us, the expected use case of the info button is for users to preview what each question type will look like before they choose to add a question -- once they choose to add the question, the information to fill out the question should be available in the question form itself.

Yes, that seems to be the case. And yes, if we can make all the information available in the form itself, there is no need to refer back to the help page. We can proceed with the modal approach and provide an additional link to open the full help page in a new tab.

[thikhinab]

Hi! I would like to work on this issue. May I have a rough idea on the starting point of the UI. What I have understood from the quoted, a possible solution is to have easy access links/icons next to each question type. This link would open a new tab to the help/instructions given for the particular question at the Setting up Questions section.

Some things to note:

* An instructor may need to see details of multiple question types to decide which type fits her needs. That scenario favors showing info of all question types in one page, possibly with a hyperlinked table of contents at the top.

* Having read the explanations and having chosen a question type, the instructor still may want to refer the details of the question type while filling out the question details. This scenario favors opening the details in a new window/tab rather than as a modal.

* It may be useful to have an info icon for each type in the drop down (e.g., it can open the help in a new window but auto-scroll to the relevant question type) as proposed in the screenshot above, if there is no danger of the user clicking on the info icon when she means to choose the question type instead.

[damithc]

Hi! I would like to work on this issue. May I have a rough idea on the starting point of the UI. What I have understood from the quoted, a possible solution is to have easy access links/icons next to each question type. This link would open a new tab to the help/instructions given for the particular question at the Setting up Questions section.

Yes @thikhinab , that's my current thinking. Other views welcome.

[thikhinab]

@damithc Understood prof! Will come up with working solution!