[#12283] Instructor view session results (course-wide): Add separate button to download results by question

[MaharshiPedu]

Fixes #12283

Outline of Solution

I have added a button that downloads question results on the right side near expand tab button.

I have used the same design that 👇🏽 follows.

[cedricongjh]

Hey @MaharshiPedu thank you for your PR!

Just a small thing, I think we should remove the download functionality from the question number

[MaharshiPedu]

Thanks for your review. I have made the changes you suggested. Please have a look.

[jasonqiu212]

Personally, the color contrast between the btn-primary download button and the bg-info panel does not sit right with me. I think it differs from the color contrast of the action buttons of other existing panels, for instance this one as mentioned:

Upon further inspection of the example above, I realized that the background color of btn-secondary was customized to be 10% darker than usual, creating the subtle difference in colors.

• Customization happens in styles.scss line 164

To maintain consistency with existing dropdown panels, I tested out darkening the background color of btn-info by 3%:

Why 3%?

• btn-primary was tweaked to be darkened by 5% while btn-secondary was darkened by 10%, for aesthetic reasons I'm assuming. Thus, I believe consistency in the darkening percentage is not the priority, and aesthetics should be prioritized.
• I felt that darkening 3% for btn-info appeared the best
• Since I'm using my own view on the aesthetic, I'm also open to better suggestions here (I'm not the best designer out there)! Feel free to try out other colorings in styles.scss line 164

@cedricongjh What do you think?

[MaharshiPedu]

I think you are right about the contrast between the btn-primary download button and the bg-info panel. Also, darkening btn-info by 3% does seem like a sweet spot aesthetically.

Suggestion:

If we look at consistency, then the chevron should also be of the same color as the other text inside the panel like in the ones below:

So, the chevron in the questions panel should also be black as the text inside that panel is black, like so:

[cedricongjh]

Yup I agree with the points raised here! Good catch @jasonqiu212 and @MaharshiPedu.

Another thing I would like to suggest is that we should change the text from "Download" to "Download Results" as this will probably make it clearer to the user what the button is for before they mouse over it (and will then see the tooltip), what do you all think?

[jasonqiu212]

@cedricongjh I agree! To keep it consistent with the other panels, I think changing the text to "Download Results" and removing the tool tip is a great idea.

[cedricongjh]

all looks good, just one small nit:

As per your suggestion, let's change the chevron to black as well, same as the text color

[MaharshiPedu]

@cedricongjh @jasonqiu212
I changed the color of chevron to black by adding a new @Input called chevronColor (with a default value of white color) in panel-chevron.component.ts. Then I passed black value of chevronColor from instructor-session-result-question-view.component.html.

Now, I am having trouble finding out the reason for the failing component tests. Would highly appreciate any help.

[jasonqiu212]

Hi @MaharshiPedu, I believe some of the snapshot tests are failing after the chevron color change.

To update to update the snapshot tests, run npm run test and press a to run all test cases. After that, check through the snapshots to make sure the changes are as expected, then press u to update them. You can find more details on snapshot testing here.

[MaharshiPedu]

I have updated the snapshots. Please have a look.

[cedricongjh]

LGTM! Thank you for the work on this

[jasonqiu212]

@MaharshiPedu Just one more small nit!

[jasonqiu212]

@cedricongjh Upon further inspection, after this merge, the input shouldShowDownloadQuestionResult in question-text-with-info.component.ts is no longer used anywhere. The input toggles the tooltip download feature on the question number.

Since the tooltip download feature is not UI friendly, do you think we should just remove the input and feature altogether? I think all future features to download something should be only done through an explicit button.

[cedricongjh]

@jasonqiu212 i agree! let's create a new issue to remove the code completely, or if @MaharshiPedu likes, can remove it as part of this PR as well

[MaharshiPedu]

I agree! I could do these changes as part of this PR.

[jasonqiu212]

LGTM! Thank you for contributing to TEAMMATES!