Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quiz exercises: Adjust user interface of quiz header and footer #9744

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from

Conversation

rabeatwork
Copy link
Contributor

@rabeatwork rabeatwork commented Nov 11, 2024

Checklist

General

Client

  • Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
  • I strictly followed the client coding and design guidelines.
  • Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
  • I added multiple screenshots/screencasts of my UI changes.
  • I translated all newly inserted strings into English and German.

Motivation and Context

The previous footer had issues, especially on smaller screens.

Description

Rearranged some information and buttons. Removed duplicated information (e.g. practice or preview). Stick footer to the bottom. Align the design in general and refactored some code.

Steps for Testing

Prerequisites:

  • 1 Instructor
  • 2 Students
  • Multiple Quiz Exercises (Synchrinised, Barched, Individual)
  1. Log in to Artemis
  2. Navigate to Course Overview --> Exercises
  3. Start different Quiz Exercises in different Modes (Preview, Pracitce, Live, View Results)
  4. Verify that everything works as expected

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.







Review Progress

Code Review

  • Code Review 1
  • Code Review 2

Manual Tests

  • Test 1
  • Test 2

Screenshots

Before:
Live:
Screenshot 2024-11-12 at 15 03 39
Screenshot 2024-11-12 at 15 03 55
Practice:
Screenshot 2024-11-12 at 15 03 01

After:
Live:
<img width="1727" alt="Screenshot 2024-11-12 at 15 00 37" src="https://github.com/user-attachments/
Screenshot 2024-11-12 at 15 04 44
assets/717221e5-35f9-4e5a-baef-47c9bd3faaf6">

Practice:
Screenshot 2024-11-12 at 15 01 07

Summary by CodeRabbit

Release Notes

  • New Features

    • Enhanced layout and structure for the quiz participation interface.
    • Improved modularity for mode indicators and consolidated display logic for quiz instructions and results.
    • Added routing capabilities to differentiate between management and standard views.
  • Bug Fixes

    • Streamlined connection status display logic for clarity.
  • Style

    • Updated styling for quiz elements, including time warnings and footer sections, focusing on a more streamlined approach.
    • Introduced new CSS classes for improved layout flexibility and sticky positioning.
  • Localization

    • Simplified phrasing for auto-save messages in both German and English localization files.

@github-actions github-actions bot added the client Pull requests that update TypeScript code. (Added Automatically!) label Nov 11, 2024
Copy link

⚠️ Unable to deploy to test servers ⚠️

Testserver "artemis-test4.artemis.cit.tum.de" is already in use by PR #9612.

@github-actions github-actions bot added the deployment-error Added by deployment workflows if an error occured label Nov 12, 2024
@rabeatwork rabeatwork removed the deployment-error Added by deployment workflows if an error occured label Nov 12, 2024
@rabeatwork rabeatwork marked this pull request as ready for review November 12, 2024 14:27
@rabeatwork rabeatwork requested a review from a team as a code owner November 12, 2024 14:27
@rabeatwork rabeatwork added component:Quiz quiz Pull requests that affect the corresponding module and removed component:Quiz labels Nov 12, 2024
Copy link

coderabbitai bot commented Nov 12, 2024

Walkthrough

The pull request introduces significant updates to the quiz participation interface, enhancing both the HTML structure and SCSS styling. The quiz-participation.component.html has undergone a comprehensive redesign, improving layout and modularity, while the SCSS file has been streamlined to focus on essential styles. Additionally, the connection status component has been modified for clarity and consistency, and localization files have been updated for conciseness in the auto-save messages.

Changes

File Change Summary
src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.html Restructured layout with Bootstrap grid, improved modularity with <ng-template>, consolidated quiz instructions and results display, updated question navigation logic, simplified footer.
src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.scss Removed redundant styles, introduced new styles for specific elements, simplified layout, and added sticky positioning styles.
src/main/webapp/app/shared/connection-status/connection-status.component.html Simplified HTML structure, removed conditional rendering for icons, and updated class assignments for connection status badges.
src/main/webapp/app/shared/connection-status/connection-status.component.scss Adjusted font sizes for connection status elements, maintaining color properties.
src/main/webapp/i18n/de/quizExercise.json Updated auto-save text for clarity in German localization.
src/main/webapp/i18n/en/quizExercise.json Updated auto-save text for conciseness in English localization.
src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.ts Added Router to constructor, introduced isManagementView boolean property for view context differentiation.
src/main/webapp/app/shared/layouts/main/main.component.html Renamed class from sticky-top to sticky-top-navbar within conditional rendering.
src/main/webapp/app/shared/layouts/main/main.component.scss Added new CSS class .sticky-top-navar for sticky positioning with higher z-index.
src/main/webapp/app/shared/notification/notification-sidebar/notification-sidebar.scss Increased z-index for .notification-overlay and .notification-sidebar classes to ensure proper stacking above other elements.
src/main/webapp/content/scss/global.scss Introduced new CSS class .min-h-100 to set minimum height to 100%.

Possibly related PRs

Suggested labels

user interface, small, bugfix, ready to merge

Suggested reviewers

  • florian-glombik
  • az108
  • krusche
  • EneaGore
  • pzdr7

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot]
coderabbitai bot previously requested changes Nov 12, 2024
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (4)
src/main/webapp/app/shared/connection-status/connection-status.component.html (1)

8-12: Consider enhancing accessibility for connection status

While the implementation is correct, consider adding aria-live="polite" to the badge div to ensure screen readers announce connection status changes.

-        <div class="badge bg-danger connectedExam">
+        <div class="badge bg-danger connectedExam" aria-live="polite">
src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.scss (2)

1-21: LGTM! Consider adding ARIA attributes for time warnings.

The styling for time indicators and score display is well-structured and follows theming guidelines. The use of CSS variables ensures consistent theming across light and dark modes.

Consider adding corresponding ARIA attributes in the HTML template when these warning classes are applied to ensure screen readers can announce time-critical states:

<div class="time-warning" role="alert" aria-live="polite">
  <!-- time warning content -->
</div>

Line range hint 1-163: LGTM! Well-structured SCSS with clear separation of concerns.

The file maintains a clear organization with:

  • Distinct sections for different UI components
  • Consistent use of CSS variables for theming
  • Responsive design considerations
  • Proper nesting of selectors

Consider splitting this file into smaller, focused modules if it grows larger:

  • _quiz-overlays.scss
  • _quiz-indicators.scss
  • _quiz-layout.scss
src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.html (1)

34-35: Simplify overlapping conditions in 'ngClass' for time indicators

The conditions for applying the time-critical and time-warning classes overlap, which may lead to both classes being applied simultaneously when remainingTimeSeconds is less than 60 or less than quizExercise.duration! / 4. To ensure only one class is applied at a time, consider adjusting the conditions to make them mutually exclusive.

Apply this diff to adjust the conditions:

 [ngClass]="{
-    'time-critical': remainingTimeSeconds < 60 || remainingTimeSeconds < quizExercise.duration! / 4,
-    'time-warning': remainingTimeSeconds < 120 || remainingTimeSeconds < quizExercise.duration! / 2,
+    'time-critical': remainingTimeSeconds < 60 || remainingTimeSeconds < quizExercise.duration! / 4,
+    'time-warning': (remainingTimeSeconds >= 60 && remainingTimeSeconds < 120) || (remainingTimeSeconds >= quizExercise.duration! / 4 && remainingTimeSeconds < quizExercise.duration! / 2),
 }"

This change ensures that the time-warning class is only applied when remainingTimeSeconds is between 60 and 120 seconds or between one-quarter and half of the quizExercise.duration, and the time-critical class is applied when remainingTimeSeconds is less than 60 seconds or less than one-quarter of the quizExercise.duration.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between de36813 and 386491f.

📒 Files selected for processing (6)
  • src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.html (2 hunks)
  • src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.scss (2 hunks)
  • src/main/webapp/app/shared/connection-status/connection-status.component.html (1 hunks)
  • src/main/webapp/app/shared/connection-status/connection-status.component.scss (2 hunks)
  • src/main/webapp/i18n/de/quizExercise.json (1 hunks)
  • src/main/webapp/i18n/en/quizExercise.json (1 hunks)
✅ Files skipped from review due to trivial changes (3)
  • src/main/webapp/app/shared/connection-status/connection-status.component.scss
  • src/main/webapp/i18n/de/quizExercise.json
  • src/main/webapp/i18n/en/quizExercise.json
🧰 Additional context used
📓 Path-based instructions (2)
src/main/webapp/app/exercises/quiz/participate/quiz-participation.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

src/main/webapp/app/shared/connection-status/connection-status.component.html (1)

Pattern src/main/webapp/**/*.html: @if and @for are new and valid Angular syntax replacing *ngIf and *ngFor. They should always be used over the old style.

🔇 Additional comments (3)
src/main/webapp/app/shared/connection-status/connection-status.component.html (3)

1-7: LGTM! Proper usage of new Angular control flow syntax

The code correctly uses the new @if syntax instead of *ngIf, following the latest Angular guidelines. The badge and icon styling are well-structured and consistent.


Line range hint 13-13: LGTM! Proper use of content projection

The named content projection with select="[innerContent]" follows Angular best practices and allows for flexible content insertion.


Line range hint 1-14: Verify integration with quiz participation component

Let's ensure this component integrates properly with the quiz participation component where it's being used.

Comment on lines +153 to +163
.sticky-top-stepwizard {
position: sticky;
top: 46px;
z-index: 18;
}

.sticky-bottom-quiz-footer {
position: sticky;
bottom: -1rem; // Removes margin from 'course-body' class to improve layout alignment
z-index: 18;
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Establish a standardized z-index scale to prevent layering conflicts.

  • Multiple z-index values found (1, 2, 3, 10, 12, 18, 31). Create a shared SCSS variables file to maintain consistency and avoid overlaps.
🔗 Analysis chain

Document z-index layering and verify sticky positioning across viewports.

The sticky positioning implementation looks good, but there are a few considerations:

  1. The z-index values should be documented to prevent future layering conflicts
  2. The negative bottom margin workaround might need verification across different viewports

Let's check for potential z-index conflicts and related sticky elements:

Consider creating a z-index scale in a shared SCSS variables file:

// _z-index.scss
$z-index-quiz-sticky: 18;
$z-index-quiz-overlay: 31;
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for other z-index declarations and sticky positioning that might conflict

# Check for other z-index declarations
rg "z-index:" src/main/webapp/app/exercises/quiz/

# Check for other sticky positioned elements
rg "position:\s*sticky" src/main/webapp/app/exercises/quiz/

Length of output: 2453

Copy link

⚠️ Unable to deploy to test servers ⚠️

Testserver "artemis-test1.artemis.cit.tum.de" is already in use by PR #9592.

@github-actions github-actions bot added the deployment-error Added by deployment workflows if an error occured label Nov 29, 2024
Copy link

@JerroyTan JerroyTan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[Tested on TS6]
Works just as described it should. Look good to me

@JerroyTan JerroyTan removed lock:artemis-test6 deployment-error Added by deployment workflows if an error occured labels Nov 29, 2024
@sawys777 sawys777 temporarily deployed to artemis-test6.artemis.cit.tum.de November 29, 2024 18:08 — with GitHub Actions Inactive
Copy link

@sawys777 sawys777 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on TS 6, Reapprove.

Copy link

@flbrgit flbrgit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on TS3, reapprove

Copy link

@HawKhiem HawKhiem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reapprove

Copy link
Contributor

@florian-glombik florian-glombik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the introduction of the templates and re-structuring which makes the template easier to read

I left some minor comments where I do not have a strong opinion, I see more work for this component but not within the scope of this PR:

  • I think that it might be good to divide the quiz-participation.component.html into further smaller components (e.g. another on vor the Overlay section and one for the Step Wizard)
  • The complexity of the template could also additionally be reduced by adding computed signals, which would also require the introduction of signals 😅

@rabeatwork
Copy link
Contributor Author

Thanks for the introduction of the templates and re-structuring which makes the template easier to read

I left some minor comments where I do not have a strong opinion, I see more work for this component but not within the scope of this PR:

  • I think that it might be good to divide the quiz-participation.component.html into further smaller components (e.g. another on vor the Overlay section and one for the Step Wizard)
  • The complexity of the template could also additionally be reduced by adding computed signals, which would also require the introduction of signals 😅

I totally agree, I just wanted to approach it in smaller steps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
client Pull requests that update TypeScript code. (Added Automatically!) ready to merge
Projects
Status: Developer Approved
Development

Successfully merging this pull request may close these issues.

9 participants