Change how students see teacher responses and support simple styling for teacher messages.

[etanttila]

This probably should have been two different PR's but since they were related to how thing appear to the student, I started making them in the same branch. Sorry about that.

Show text responses immediately above text fields for students

What?

Change student view so the responses sent by the student are shown immediately above the text field and empty the text field.

If there are several text fields, display teacher responses by the "primary" text feedback field, which is either a text field with the flag "main-feedback" (if any field has the flag) or the last text field.

Change also the modal submission preview so it highlights the last message from the student with a blue border.

Why? This should make it clearer to the student that sending another response does not edit the previous response but sends a new message. This also means that messages don't need to indicate which field the response was from (using the field key).

How? Change rendering in jinja template

Fixes #54 Fixes #52

Enable simple styling of teacher messages

What?

Allow teacher messages to be styled using HTML tags.

• Add a preview functionality so the teacher can see before sending how the message appears and everything works.
• Add styling buttons that automatically add (or remove) the proper tags around highlighted text (for inserting link, bold, italic, monospace).
• Enable also keyboard shortcuts for inserting link, bold, italic (and underline) tags.

Style buttons have tooltips. Tags are place around selected text (or cursor if none is selected), with the text being selected afterwards as well. If the button is pressed (and the tag in question is around selected text), the appropriate tags are removed. (Same for keyboard shortcuts). For links, the cursor is placed where the url would go. After clicking the preview button, the user can see how the response would appear. The styling buttons are disabled, and the preview button is replace with a button for going back to the editing view. The message after being sent.

If the styling buttons wouldn't fit in the box, they are placed in a popover which appears when the toggle button is pressed.

For feedback that requires grading, change the radio button (+ submit) replacement buttons from a block button group to a segmented button with dropdown toggle. This as the "Good" (full points) option be the default option visible and the two other options available in the dropdown.

Why?

Enable styling for teacher messages.

How?

Javascript, jQuery, adding buttons and event listeners, etc. Any HTML can be written in the field (and it's not sanitized). Styling buttons and keyboard shortcuts are provided for better UX experience.

Fixes #93

Testing

Remember to add or update unit tests for new features and changes.

• How to test your changes in A-plus
• How to test accessibility

What type of test did you run?

• [x] Accessibility test using the WAVE extension.
• [ ] Django unit tests.
• [ ] Selenium tests.
• [ ] Other test. (Add a description below)
• [x] Manual testing.

Screen reader (for the student view) Testing different ways of editing teacher responses (and adding/removing tags), and that the right things disappear and appear when submitting (or going editing) despite if the message had been sent from the editing view or preview view. Tested with different screen widths.

Tested keyboard shortcuts on Linux with Firefox. Keyboard shortcuts should be also tested with Mac.

Did you test the changes in

• [x] Chrome
• [x] Firefox
• [ ] This pull request cannot be tested in the browser.

Think of what is affected by these changes and could become broken

Translation

• [x] Did you modify or add new strings in the user interface? (Read about how to create translation)

Programming style

• [x] Did you follow our style guides?
• [x] Did you use Python type hinting in all functions that you added or edited? (type hints for function parameters and return values)

Have you updated the README or other relevant documentation?

• [ ] documents inside the doc directory.
• [ ] README.md.
• [ ] Aplus Manual.
• [ ] Other documentation (mention below which documentation).

Is it Done?

• [ ] Reviewer has finished the code review
• [ ] After the review, the developer has made changes accordingly
• [ ] Customer/Teacher has accepted the implementation of the feature

Clean up your git commit history before submitting the pull request!

[etanttila]

Jimmy also noticed that the styling keyboard shortcuts and preview-toggle-button wasn't working as intended when responding to the newest message in a conversation. This was due to them being in the default state rather than edit state and not having the dynamic_forms script run for them since they had different classes. So the most recent fixup commit that should fix that issue.