Gamification quiz

Preparation

Add duration properties to content and answer models and remove unused formatAttributes property in content model.

Improve and refactor countdown timer component

• Use ServerTimeService to take the offset into account
• Vizualize remaining time with a custom progress bar

Create waiting area for quiz contents with alias support

Create standalone component which can be displayed to participants when waiting for content countdown to start. If participants doesn't have submitted an alias for a room they can either join the quiz confirming the generated alias or entering their own.

For this create ContentStepInfoComponent to show current content step in content group.

Also create new model RoomUserAlias and service RoomUserAliasService according to arsnova-server!777 (merged).

Implement leaderboard for contents and content groups

Create standalone components for displaying a leaderboard for a single content (ContentLeaderboardComponent) or with the total score in a content group (LeaderboardComponent).

The components are listing the leaderboard items sorted by their points/score with a position, user alias, points and duration (for single contents). If aliasId is passed, corresponding entry is highlighted.

For this add new models LeaderboardItem and CurrentLeaderboardItem.

Also add DurationPipe for displaying milliseconds as mm:ss:SS.

See arsnova-server!784 (merged)

Introduce group type for content groups

Add groupType property to content groups which can be MIXED (default) or QUIZ for now.

See arsnova-server!783 (merged)

Creator

Add option to enable/disable quiz mode for content groups. If quiz mode is enabled, a duration can be set for contents in this group.

Add leaderboard page for creators

Add new route …/series/:seriesName/leaderboard where LeaderboardPageComponent displays the current leaderboard for the group.

For routing add a new button next to content group settings.

Add quiz mode controls to presentation mode

Allow presenters to start the countdown for a content via HotkeyActionButtonComponent if quiz mode is enabled in answering end time is not set yet. Until countdown is started show ContentStepInfo.

Add leaderboard item to control bar, with which new LeaderboardPageComponent can be displayed at any point while presenting contents with quiz mode.

Participant

Add gamification elements to participants content answering

If quiz mode is enabled for a content group, in participants content answering ContentWaitingComponent, CountdownTimerComponent and ContentLeaderboardComponent are used if needed.

Also participants are routet to new published contents if quiz mode is enabled. If answering of a content is locked due to finished timer, the answer input will be disabled. If answered in time, the time needed is added to hint.

For displaying leaderboard next to content answering and statistics, add a tab for leaderboard route.

Extend participants series overview for quiz mode

If quiz mode is enabled, the leaderboard position, a new chart with score and leaderboard list is displayed in series overview.

Furthermore duration for the single contents is added to content list items.

For now, leaderboard is displayed initially if quiz mode is enabled and contents can be displayed additionally. In the future we could use tabs to switch between these lists.

Related: particify/dev/common-concerns#63, particify/dev/common-concerns#64, particify/dev/common-concerns#66

Also see follow-up issue: https://gitlab.com/particify/dev/common-concerns/-/issues/67