Feature Name: Skill-Time Profile Export

Component 5: Public Profile and Validator Service

Problem Description:

For the sake of validation and credibility, users need a public profile that showcases their skills and associated time investments. This public profile should be easily accessible via a unique URL and should be linked through the QR code in the PDF, serving as proof of their skill levels.

Component Description:

This service is responsible for orchestrating the creation, deletion, and updating of public profiles. These profiles serve as a validation page for a user's skills and are linked via the QR code embedded in the PDF.

Functional Requirements:

• Public Profile Toggle: Provide users with the ability to activate or deactivate their public profile. Activation should generate a public profile page and a unique, shareable URL. Deactivation should render the page inaccessible and invalidate the URL.
• Public Profile Page Creation: Upon activation, generate a public profile page that showcases the user's public username and all their active skills (skills they've gained XP in).
• Data Retrieval: Interface with the Skillset Database to access the user's current skill metrics.
• QR Code Linking: The Link to this profile will be incorporated in the PDF from #24 should direct viewers to this public profile page. The link to the page therefore has to be unique and persistent.
• Data Synchronization: Ensure that the data on the public profile page remains synchronized with the user's real-time skill data on the platform.
• Cryptographic Security: Each unique URL should integrate a UUID (Universally Unique Identifier) to deter brute force attacks and unauthorized access.

Non-Functional Requirements:

• Performance: The public profile page should load swiftly, guaranteeing a seamless experience for viewers.
• Reliability: The data presented on the public profile page should be accurate, consistent, and devoid of errors.
• Security: As this service interacts with user data, it's paramount to enforce strict security protocols to prevent unauthorized access.

Acceptance Criteria:

• The public profile toggle should function as expected, producing a unique URL and public profile page upon activation and invalidating the URL and deactivating the page upon deactivation.
• The public profile page should correctly display the user's public username alongside all their active skills.
• Accurately fetch the user's latest skill data from the Skillset Database.
• The QR code embedded in the PDF should seamlessly link to the user's public profile page.
• Ensure that the data on the public profile page remains in sync with the user's updated skill data on the platform.
• Each unique URL should incorporate a UUID to bolster security, and the system should be fortified against brute force attempts and unauthorized access.

Dependencies:

• None, it's a requirement for #24

Notes:

• Following discussions and consensus on this issue, designers will move forward with the necessary mockups.
• Interactions or adjustments should comply with the existing database schemas.

Bootstrap Academy username

Morpheus

Contact Details

[email protected]

What browsers are you seeing the problem on?

Chrome

What happened?

Bug Report: Issue with Rating and Reporting Quiz Questions

Description:

Users are encountering difficulties when attempting to rate quiz questions. Specifically, they must either re-click on the quiz question or refresh the page to access the rating option. Additionally, if a question has a multitude of answers, reporting it becomes prohibitively expensive in terms of morphcoin. This issue can be circumvented if users are permitted to report questions prior to answering them.

Expected Behavior:

• After attempting a quiz question, users should immediately be presented with rating options without the need to click again or refresh the page.
• Users should be able to report a question even before answering it.
• Answering a question should automatically display its rating options.
• Within the lecture dashboard, users should have the option to report questions instead of just answering them.

Current Behavior:

1. Users must either re-click the quiz question or refresh the page to see the rating option.
2. If a question has many answers, reporting it can cost a significant amount of morphcoin.
3. Users can only report questions after they've answered them.
4. The lecture dashboard only allows users to answer questions and doesn't provide an option to report them.

Steps to Reproduce:

1. Attempt a quiz question.
2. Observe the absence of immediate rating options.
3. Attempt to report a question with multiple answers and observe the morphcoin cost.
4. Navigate to the lecture dashboard and try to report a question.

Suggested Fix:

1. Adjust the user interface to immediately show rating options after a user attempts a quiz question.
2. Implement functionality to allow users to report questions even before answering them.
3. Ensure that answering a question automatically brings up the rating options.
4. Update the lecture dashboard interface to include a "Report" option alongside the "Answer" option for questions.

What browsers are you seeing the problem on?

Chrome

What happened?

Profile: The course name overlaps with the skills in the skill points list.

Acceptance criteria

• When clicking on the profile summary, the following information should be displayed without overlap:
  • Skill Name
  • Skill and parent skill
  • Skill points
  • Any other relevant information
• Ensure clear visual separation between different pieces of information.

Bootstrap Academy username

Morpheus

Description

Feature Name: Skill-Time Profile Export

Component 4: PDF Export Microservice and Button

Problem Description:

Users need a tangible, professional document that encapsulates their skill levels and the corresponding time investments. This document should be easily shareable, and for validation purposes, it must contain a QR code linking to a public profile.

Component Description:

This service is tasked with generating a comprehensive PDF document of the user's profile. The PDF will detail the user's skills and the corresponding time investments, and it will include a QR code for validation purposes.

Functional Requirements:

• Data Retrieval: Interface with the User Profile Microservice to fetch the user's skill data and the associated time investment metrics.

• PDF Creation: Develop a function to produce a polished, professional-grade PDF. The document should feature the platform's logo, the date of export, the user's public username, a list of skills, and the time investment for each skill. Optionally, based on user preferences, the PDF can also display the user's full name.

• QR Code Generation: Implement a function to generate a unique QR code for each user. Scanning this QR code should direct the viewer to a page that validates the user's skills. This QR code must be incorporated into the generated PDF.

• Download Function: Allow users to effortlessly download the crafted PDF by clicking on a "Download" button.

Non-Functional Requirements:

• Performance: The process of PDF generation and download should be swift to ensure a fluid user experience.

• Reliability: The generated PDF should be accurate, consistent, and free of errors.

• Security: Given that the service handles sensitive user information, it's imperative to adhere to stringent security protocols to thwart unauthorized access.

Acceptance Criteria:

• Accurately retrieve and format all pertinent user profile data for the PDF.

• Successfully generate a well-structured, professional-looking PDF that encompasses all relevant user details.

• Each user should have a distinct QR code embedded in their PDF. This QR code should correctly point to the user's public profile page for validation.

• Users should have the autonomy to decide which data (e.g., full name) they wish to include in the PDF.

• The PDF must visibly display the platform logo and the precise date of export.

• The process of creating the PDF should be efficient, and users should face no hindrances when downloading the PDF.

Dependencies:

• Depends on: #23 for time measurements
• Depends on: #25 for generating the link for the QR Code

Notes:

• Subsequent discussions and approvals on this issue will pave the way for designers to draft the necessary mockups.

• All interactions or modifications should be in line with the pre-established database schemas.

What browsers are you seeing the problem on?

Chrome

What happened?

You can rate a webinarstoo if its cancelled.

Acceptance criteria

• Cancelled Webinars should not display a rating pop up window

Bootstrap Academy username

Morpheus

Contact Details

No response

What browsers are you seeing the problem on?

Chrome

What happened?

Bug Report: Admin Dashboard - Reported Tasks Section

Overview:

Our website facilitates user-generated quizzes and challenges. To maintain content quality, we allow users to report inappropriate or incorrect tasks. Admins then review these reports via the admin dashboard.

Issue 1: Missing Task Creator Information

Problem Description:

In the admin dashboard, under the "Reported Tasks" section, while I can view details about the report itself (Reported By, Reason, Comment, Reported At, Actions), the information about the task's creator (the user who was reported) is missing.

Expected Behavior:

The creator of the reported task should be prominently displayed within the "Reported Tasks" section to identify the user in question.

Acceptance Criteria:

• The "Reported Tasks" section should have an additional column/field displaying the creator of each reported task.

Issue 2: Report Details Page - Missing & Incorrect Information

Problem Description:

Upon navigating to the details of a specific report, the information displayed seems incomplete and incorrect.

1. Essential report details (Reported By, Reason, Comment, Reported At, and Creator of the task) are not visible.
2. Under "Options", the original quiz answer options ("One", "Two", "Three", "Four") are appended with filler "Lorem ipsum" text, indicating a frontend bug.
3. The action buttons ("Incorrect" and "Correct") are inadequate for comprehensive report management.

Expected Behavior:

1. All essential report details should be visible on the report details page.
2. The original quiz answer options should be displayed without any appended text.
3. Additional action buttons should be present: "Delete Task", "Adjust Task", "Ban Creator", and "Ban Reporter".

Acceptance Criteria:

• The report details page should display all essential report details.
• The "Options" section should only display the original quiz answer options without any additional text.
• Introduce new action buttons as described above.

Issue 3: Report Archiving and Revisiting

Problem Description:

Currently, after taking action on a report (Correct/Incorrect), the report disappears from the dashboard, making it inaccessible for future reference.

Expected Behavior:

Processed reports should not be deleted. Instead, they should be archived and displayed in a greyed-out format at the bottom of the "Reported Tasks" section. Admins should also have the option to filter and view either fresh reports or all reports, including the archived ones.

Acceptance Criteria:

• Processed reports should be archived and viewable in a greyed-out format.
• Introduce a filter option for viewing fresh reports and all reports (including archived ones).

What browsers are you seeing the problem on?

Chrome

What happened?

There is a problem that existing quizzes are not displayed in the "Watch Courses" view under the "Quiz" tab. I will clarify this using the video below.

Note that the quiz shown in the video does not seem to exist anymore. For a different example, see issue #83 by @RLeo

Bootstrap Academy username

Joshiy13

Contact Details

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

If you open the dropdown menu of the FAQ you can't close it again. Video showcasing the bug is linked below.

https://file.io/Wa9N4GfP7jqh

Fix and improve the user administration page on https://bootstrap-academy-admin.pages.dev/dashboard/users.

Search

Currently it is only possible to search by email, not by username. There is also a bug which causes the same users to appear more than once when searching repeatedly using the same search term.

Pagination

Replace the "load more" button with a pagination menu. Pagination works by splitting the list of users into smaller chunks (pages), all of the same size. For example, if the page size is 20, the first 20 users (user 1-20) are on the first page, user 21-40 on the second page, user 41-60 on the third, and so on. There should be a pagination menu, consisting of buttons to allow navigation between the different pages.

An example for a pagination menu:

Filters

It is already possible to filter the user list, to display for example only users with 2FA enabled, but the current implementation is very limiting, since it allows only one filter at once. This should be changed to allow more complex queries, for example to only display enabled user accounts, that also have admin privileges, but do not have 2FA enabled (this kind of query is not possible with the current implementation).

Acceptance criteria

• The admin can select whether to search by username or by email.
• Instead of the "load more" button, there is a pagination menu.
  • The total number of (matching) users and the number of users on the current page are displayed.
  • There are buttons for the 5 pages closest to the current page.
  • There are buttons to go to the next/previous page.
  • There are buttons to jump to the first/last page.
  • It is possible to select the page size (10/20/50/100).
• There are additional (composable) filters to only display...
  • enabled/disabled users
  • normal/admin users
  • users with 2FA enabled/disabled
  • verified/unverified users
  • users who are / are not subscribed to the newsletter

Feature Name: Skill Icon Enhancement for User Progress

Problem Description:

To provide users with an immediate visual representation of their progress and opportunities across different learning modes (courses, webinars, coachings, and tasks), the skill icons in both the root and sub-trees need to be enhanced. By doing so, users can quickly identify their current standing and what further actions they can take for each skill.

Feature Description:

The skill icons in both the root tree and sub-trees will display four dots. Each dot represents one of the learning modes: courses, webinars, coachings, and tasks. The color of these dots will be determined by the user's interaction and availability in each respective learning mode.

Functional Requirements:

• Skill Icon Update: Each skill icon, located in the root or sub-tree, will feature four dots. These dots correspond to courses, webinars, coachings, and tasks.

• Courses Dot Logic: If the user has unfinished courses related to a skill, the courses dot will adopt the appropriate color. If there are no ongoing courses for the user, the dot turns grey.

• Webinar Dot Logic: If webinars are available for the user to enroll in (ones they haven't yet joined), the webinar dot assumes its specific color. Otherwise, it becomes grey.

• Coaching Dot Logic: If coaching opportunities are available for the user, the coaching dot takes on its designated color. If no such opportunities exist, it should be grey.

• Tasks Dot Logic: If there are tasks (like Quizzes or Challenges) available for the user, the tasks dot should show its assigned color. In the absence of available tasks, it becomes grey.

Non-Functional Requirements:

• Performance:

  • The icons, with their updated dots, should load promptly, ensuring a seamless user experience.
  • Instead of fetching fresh data on every load, the system should cache the results. This cache should be refreshed once daily to minimize the strain on the backend while still providing relatively up-to-date information to the users.

• Reliability: The color determination logic for the dots should be accurate, giving users a correct representation of their interactions and opportunities.

• UI Consistency: The dots within the skill icons should maintain a consistent appearance and behavior throughout the platform.

Acceptance Criteria:

• Skill icons in both root and sub-trees should display four dots, each symbolizing courses, webinars, coachings, and tasks.

• The courses dot's color should reflect the user's unfinished courses status. If none are ongoing, it should be grey.

• The webinar dot should change its color based on available webinars for the user to enroll in. If none exist, it turns grey.

• The coaching dot's color should indicate available coaching opportunities. If none are present, it becomes grey.

• The tasks dot should change color based on available tasks for the user. If no tasks are present, it turns grey.

Add descriptions for skills and subskills.

Acceptance criteria

• In the admin dashboard, add a field to set a description for both skills and subskills.
• In the skill tree, display the configured description for the currently selected skill or subskill.

Bootstrap Academy username

7heProtagonist

Description

There is a description at the "Sub Skill Information" with requirements, how/when I can make Webinars/Coachings.
We should have the same description for Quizzes.

Maybe the description should be a bit more precise too. Because i.e.:
Is "Web Developer" a Skill and "Html und Css" a Sub Skill?
But underneath "Web Developer" I can read, that I gathered "x/13 Skills". So x/13 Skills means actually "Sub Skills"?

Maybe we could also add a further Information, how I can gather enough XP to get the necessary Level. Because just marking the Videos of a Sub Skill with "als erledigt markieren" isnt (so far as I can see) enough for that.

Bootstrap Academy username

DragonDev1906

Description

Above a Video there are always the Video, Quiz and Challenge tabs, even if there is no Quiz or Challenge. This makes it a bit difficult to see at a glance whether there are Quizzes/Challenges.

It would be nice if the respective button is hidden (or disabled) and maybe even shows a number indicating how many Quizzes/Questions there are if it is > 0.

Bootstrap Academy username

BromiesTM

Description

Overview

This issue aims to improve the project by adding support for containerized development using Podman. Currently, the project uses a Node.js development environment, and this enhancement will allow developers to set up a development environment within a Podman container, improving isolation and reproducibility by providing a unified development environment.

The container can be controlled by a Makefile for easier management.

Proposal

FROM node:18.18

ENV NODE_ENV=development

WORKDIR /app

CMD ["sleep", "infinity"]

IMAGE_NAME = node18-dev-env
CONTAINER_NAME = bootstrap-academy-frontend-dev

build:
	podman build -t $(IMAGE_NAME) .

start: build
	podman rm -f $(CONTAINER_NAME) || true
	podman run -d --network=host -v .:/app:z --name $(CONTAINER_NAME) localhost/$(IMAGE_NAME):latest

run-dev: install
	podman exec -it ${CONTAINER_NAME} /bin/bash -c "npm run dev"

install: start
	podman exec -it ${CONTAINER_NAME} /bin/bash -c "npm install"

Feature: Interactive Matchings Exercise

Objective:

To diversify the learning experience on bootstrap.academy, we aim to introduce an interactive "matchings" exercise as an alternative to the traditional Multiple Choice Questions (MCQs). The functionality is already supported by the backend and can be implemented using the API.

Functionality:

• User Interface:
  • Drag and Drop: Implement a mechanism where users can drag an item from one list and position it over its corresponding match in another list.
  • Click and Connect: Develop a feature where users can select one item and then its matching pair. A connecting dotted line should appear upon the second click, signifying a match.
  • Ensure that the platform caters to both methods, empowering users with a choice in their interaction method.
• Data Retrieval:
  • The frontend must be equipped to invoke the relevant API endpoints to fetch the data for matching pairs.
• User Feedback:
  • Instant Feedback: Immediately after a user matches a pair, they should receive feedback indicating the correctness of their match.
  • End Feedback: If this mode is active, users will get feedback only after completing the entire matching exercise.
  • The mode of feedback (Instant or End) should be contingent on the difficulty level determined by the task creator.
• Reporting:
  • Like and Report: After completion the user is like with MCQs presented with the option to either like, dislike or report the task.
• Integration:
  • Ensure the feature aligns with the platform's technology stack, specifically Vue and Nuxt.
• Design & Styling:
  • Maintain consistency in design, ensuring the matching feature seamlessly integrates with the website's aesthetics.
  • Introduce the matching exercise as an alternative to MCQs, giving users a choice between the two.

User Flow:

• Users should be able to navigate to the lecture or skill tree where MCQs are traditionally located.
• Upon arrival, users should be presented with a MCQs or the new matching exercise.
• When users opt for the matching exercise, they should see two distinct lists: one containing items to be matched and the other with potential matches.
• Users should have the flexibility to employ either the drag and drop method or the click and connect approach to match items.
• Depending on the task creator's specified difficulty level, users should receive either instant feedback upon each match or cumulative feedback at the conclusion of the exercise.
• Upon completion, users should be able to seamlessly transition to the subsequent lecture or skill tree segment.

Dependencies:

• None explicitly for this feature. However, ensure seamless integration with existing MCQ functionalities and the platform's tech stack. Also, the feature for creating and reviewing reports of Matchings are essentially needed but they can be developed independently.

Notes:

• It's crucial that the matching mechanism is intuitive and feedback is immediate, fostering a rewarding and engaging user experience.

Feature Name: Visual Representation of Skill Tree Progress

Problem Description:

To enhance user engagement and provide a tangible representation of progress, we aim to introduce a visual enhancement to the skill tree nodes. This visual representation will provide clear cues on the user's progress in each skill without relying on colors, which are already reserved for bookmarks.

Objective:

Visually represent the user's progression in the skill tree for each node and sub-node without interfering with the existing skill tree structure or functionality.

Components:

1. Skill and Subskill Nodes:

Functional Requirements:

• Default State: Each skill and subskill node should have a regular icon with a single border, representing no XP gained or level 0.

• Progressive States: As the user gains XP and progresses in levels, the node's visual representation should evolve based on the described levels (25, 42, and 50).

2. Dotted Border:

Functional Requirements:

• Appearance: Starting from Level 25, a dotted border should surround the original border of the node. This design should be consistent for all nodes and sub-nodes.

3. Segmented Border:

Functional Requirements:

• Appearance: From Level 42 onwards, add four evenly spaced segments around the node's dotted border to give a clear indication of progress.

4. Burning Flame Effect:

Functional Requirements:

• Flame Animation: Upon reaching Level 50, which is the maximum level, a subtle 2D burning flame effect should emerge behind the node and its borders. This flame should be colored identically to the borders and should symbolize the user's mastery over the skill.

• Subtlety: The flame effect should be gentle and continuous, without being too animated or disturbing.

Non-Functional Requirements:

• Responsive Design: Ensure that these visual modifications are adaptive and render correctly across varied screen sizes and devices. Additionally, conduct tests for appearance and animations across different browsers to ensure universal compatibility.

• Performance Optimization:

  • Use lightweight images or SVGs combined with CSS transitions for smooth and efficient animations.

Dependencies:

• None for this feature. However, it's crucial to ensure that these visual changes do not conflict with existing functionalities, especially the color-coded bookmarks.

Notes:

• The primary goal is to provide an engaging visual feedback mechanism without altering the core functionalities or the data structure of the skill tree.

• All modifications should adhere to the current database schemas and the existing skill tree structure.

Change the german translations to consistently use the "Du-Form" instead of the "Sie-Form" (https://github.com/orgs/Bootstrap-Academy/discussions/39#discussioncomment-7219595).

On the profile page, when clicking on a course, redirect to the first video which has not yet been watched.

API endpoint to get the relevant video: GET /skills/courses/{course_id}/next_unseen

Acceptance criteria

• When clicking on a course on the profile page, redirect to the video returned by the endpoint mentioned above.

Bootstrap Academy username

sensi

Contact Details

No response

What browsers are you seeing the problem on?

No response

What happened?

https://bootstrap-academy-frontend.pages.dev/

[German]

[English]

I hope I am posting this at the right place. If not, I am sorry ^^'

Bootstrap Academy username

7heProtagonist

Contact Details

no response

What browsers are you seeing the problem on?

No response

What happened?

Should we change the Question "Wie würde man einen String erzeugen, der den Text Sie sagte: "Hallo!" enthält? text = ?" to something like "Wie würde man einen String in der Variable text erzeugen, der wie folgt lautet: Sie sagte: "Hallo!" ". Or something else, which makes the operated String clearer.
Or is the current formulation intentionally to be a bit more fuzzy and there is no bug?

Add meta tags so e.g. Discord will have embeds

Bootstrap Academy username

Joshiy13

Contact Details

No response

What browsers are you seeing the problem on?

No response

What happened?

Description

If you go to your profile page and you haven't watched any courses on that account, it shows empty boxes (Probably thumbsnails).

Fix

Remove the empty boxes/thumbsnails from the page if the user hasn't watched any videos yet.

Screenshots

Bootstrap Academy username

JL97

Contact Details

No response

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

What happened?

If you scroll down the Website having the Modal for an upcoming Event opened (using the Booking Button), the Footer overlaps the Modal at the Screen Width of >= 1440px.

Bootstrap Academy username

FabulousFox

Contact Details

No response

What browsers are you seeing the problem on?

Firefox, Microsoft Edge

What happened?

When hovering over an entry, a horizontal scrollbar appears and the entry gets clipped off

Bootstrap Academy username

7heProtagonist

Contact Details

No response

What browsers are you seeing the problem on?

Firefox

What happened?

At the Profilepage under "Skillpunkte" the count of Skills do not increment even if you market each Video with "als erledigt markieren".

Bootstrap Academy username

Joshiy13

Contact Details

No response

What browsers are you seeing the problem on?

No response

What happened?

Description

The top menu that is there on all the pages (Logo, Calendar, Skill tree, Profile picture etc.) is not on the leaderboard page.
For consistency it should probably be added.

Showcase

Bootstrap Academy username

Morpheus

Description

Feature: Seasonal Leaderboard

Objective:

Introduce a dynamic seasonal leaderboard system that tracks and showcases user XP over 3-month intervals, incentivizing top performers with badges and MorphCoin.

Functional Requirements:

• Seasonal Duration Configuration:

  • Set each season to persist for 3 months.
  • Implement an automated system to reset the leaderboard at the season's culmination and initiate a new season.

• Leaderboard Display Enhancements:

  • Adapt the existing leaderboard display to include a season toggle:
    • Integrate a switch or button allowing users to transition between "Seasonal" and "All-time" views.
    • Ensure that the default view is "Seasonal".
    • Clearly label and display the leaderboard's type (Seasonal or All-time) to prevent user confusion.

• Leaderboard Layout Adjustments:

  • Retain the existing table format but ensure the following columns are prominently displayed:
    • Rank
    • User Name
    • XP Earned in the season (or overall for the all-time view)
  • Facilitate users to toggle not just between the overall leaderboards but also the individual skill leaderboards within both "Seasonal" and "All-time" views.

• Leaderboard Update Mechanism:

  • Utilize the existing XP earning mechanisms and ensure the leaderboard reflects real-time XP updates.

• Season Transition Logic:

  • Design an end-of-season protocol where:
    • The leaderboard undergoes a reset.
    • First-place finishers on each leaderboard (encompassing overall and individual skills) receive a distinct badge.
    • MorphCoin is distributed as rewards:
      • 1st Place: 200 MorphCoin (configurable)
      • 2nd Place: 100 MorphCoin (configurable)
      • 3rd Place: 50 MorphCoin (configurable)

• User Profile Integration:

  • Ensure that user names on the leaderboard link to their respective profiles, where viewers can explore their achievements, badges, and XP specifics. Only allow that if the user setup their public profile.

Acceptance Criteria:

• Users should be able to seamlessly switch between the "Seasonal" and "All-time" leaderboards.

• The leaderboard should consistently update in real-time, capturing the latest XP gains.

• At the conclusion of every season, theleaderboard should reset, and top performers must be rewarded according to the specified criteria.

• Each user's name on the leaderboard should serve as an interactive link, redirecting viewers to their individual profiles where comprehensive achievements, badges, and XP details are displayed.

• The seasonal leaderboard, by default, should showcase XP earned during the current season, while the all-time leaderboard should reflect the total XP accumulated over time.

• Users securing the top three positions on the overall seasonal leaderboard should receive their respective MorphCoin rewards automatically.

• Users ranked first in both the overall and individual skill leaderboards should be awarded the designated badge for their achievement.

Dependencies:

• Depends on: Existing leaderboard microservice for layout and display.
• Depends on: Existing XP earning microservices to fetch real-time XP updates.

Notes:

• The existing leaderboard infrastructure and XP earning mechanisms will be leveraged. The primary enhancement is the introduction of the seasonal component and the accompanying rewards system.
• Given the real-time nature of XP updates and leaderboard refreshes, ensuring system performance and responsiveness is paramount.
• As the feature involves MorphCoin rewards, ensure robust testing to prevent potential exploits or inaccuracies in coin distribution.

Bootstrap Academy username

Morpheus

Description

Feature: Admin Dashboard Extension for Moderation of Matchings

Objective:

The goal is to enhance the admin dashboard by integrating a moderation system for reported matchings. This addition should blend seamlessly with the existing MCQ moderation process, ensuring a consistent and straightforward experience for admins.

Functionality:

• Dashboard Interface:

  • Extend the admin dashboard to showcase reported matchings in a structured list format. The list should be columnized to display: "Reported By", "Reason", "Comment", "Reported At", and "Actions". The entries have to included seemlessly with the existing MCQs. The list is allowed to mix MCQs and Matchings, there is no need to differentiate.
  • In the "Actions" column, introduce a "view" option for admins to inspect the details of the reported matching. For matchings, this should present the pairs in a clear format. Just like with MCQs.

• Review & Action:

  • Upon selecting the "view" option, admins should be able to see the content of the reported matching in detail.
  • Incorporate action buttons that mirror the MCQ moderation's actions. Admins should be able to "Approve", "Delete", "Edit", or "Ban User" based on the matching's content and the report's context.

• Design & Styling:

  • Ensure the design for the matching view is intuitive, allowing admins to easily discern the pairs and their connections.
  • Preserve the current aesthetics and style of the admin dashboard to guarantee a cohesive look and feel.

Admin Flow for Moderation:

• Admins can access the dashboard after logging in.

• The dashboard should list all reported tasks for review.

• Using the "view" function under the "Actions" column, admins should be able to delve into the details of a reported matching.

• Post-review, admins should have clear options to "Approve", "Delete", "Edit", or "Ban User" based on their assessment. The actions should NOT be implemented anew, rather use existing implementations that are used for MCQs.

Dependencies:

• Assumes the existing MCQ moderation process is fully functional and that the admin dashboard is set up.

Notes:

• It's vital to ensure that the moderation process for matchings is as streamlined and intuitive as the MCQ moderation to maintain admin efficiency.

Bootstrap Academy username

Lauritz

Contact Details

[email protected]

What browsers are you seeing the problem on?

Microsoft Edge (Version 117.0)

What happened?

The Switch is not displayed correctly

On the course summary page, add the total duration of the entire course and whether the user has completed the course.

Acceptance criteria

• Display the total duration of the entire course.
• Display whether the user has completed the course.

To enhance user experience and provide tangible metrics for their skill levels, we aim to convert user skill levels into an estimated time investment. This would allow users to visualize their proficiency in terms of time spent, which can be invaluable for job applications or personal progress tracking.

Stories

• #23
• #24
• #25

Bootstrap Academy username

Joshiy13

Contact Details

No response

What browsers are you seeing the problem on?

Chrome, Safari

What happened?

Bug

If you press on your profile and then press on the menu on the side, the menu on the side gets overlayed by the menu of the profile. I have only been able to test this on safari and chrome, but I‘m pretty sure it will happen on any mobile device.

Cause

There is not enough space on some mobile screens

Solution

Making the profile menu close when pressing on another menu would fix this issue.

Screenshots

Bootstrap Academy username

Joshiy13

Contact Details

No response

What browsers are you seeing the problem on?

No response

What happened?

Description

The "Mehr folgt bald" or "More coming soon" button on https://bootstrap.academy/morphcoins is not clickable/does nothing.
Video linked below.

Fix

Make it not be a clickable button anymore if it does nothing.

Showcase

https://file.io/jFcosjV6hFgb

Bootstrap Academy username

Morpheus

Contact Details

[email protected]

What browsers are you seeing the problem on?

Chrome

What happened?

Issue with Job Details Text Wrapping

In the Job Details section, the text wrapping of the descriptions is not functioning correctly. The text breaks in the middle of words.

I would expect the text to wrap after a word, similar to how it functions on https://bootstrap.academy/morphcoins.

Error URL: https://bootstrap.academy/jobs/f6dd7748-38e5-4792-b762-2df57005a1f9

Acceptance criteria

• Text should wrap after a word in the Job Details description.
• Ensure consistency with the wrapping functionality as seen on https://bootstrap.academy/morphcoins.

Bootstrap Academy username

Forest

Contact Details

@Forestsoft-de

What browsers are you seeing the problem on?

Chrome

What happened?

I created an account and was redirected to the E-Mail confirmation page to enter the token.

After clicking on back i am suddently loggedin and beeing able to change my account details.

Tried to add my VAT Id and there is an small icon:

the console shows:

Bootstrap Academy username

DragonDev1906

Contact Details

No response

What browsers are you seeing the problem on?

Other (please specify below)

What happened?

Browser: Brave Version 1.58.137 Chromium: 117.0.5938.153 (Official Build) (64-bit)

Description

I just created an account on https://bootstrap.academy/auth/signup and after clicking the create account button ("Account Erdstellen") it briefly turned into a loading icon but afterwards it just turned back to its original form, as if something went wrong.

I don't have a recording or console logs of the first attempt, but when trying a second time I'm getting a 409 (Conflict) error in the console. Apparently the account creation was successful but a lack of indication or redirect made this difficult to tell.

For a normal user this is (probably) confusing and it isn't clear where to go next (I was logged in automatically, so manually going to the profile page worked.

Actual behavior

It looks identical, regardless of whether the account creation was successful or returned an error (besides the error in the dev-console).

Expected behavior

• Successful account creation should redirect to https://bootstrap.academy/profile
• Failed account creation (e.g. because the username is already taken or there already is an account with this email) should display a (human readable) error message (as returned by the server) and ideally even highlight the field that caused the issue.

Screenshots (unfortunately only of the failed second/third attempt)

Change the author attribute in courses to a list of author objects to allow more than one author. An author object always contains at least a name field (which corresponds to the name displayed in the frontend) and optionally a url field to link to an external resource.

Acceptance criteria

• In the backend, update the type and all course configs.
• In the frontend, display the author list properly (e.g. for authors: [{"name": "Foo"}, {"name": "Bar", "url: "https://github.com/Bar"}, {"name": "Baz", "url": "https://youtube.com/@Baz"}] display Created by Foo, Bar and Baz).
• In the frontend, when clicking on an author, redirect to the corresponding url of this author. In the above example, clicking on "Bar" should redirect to https://github.com/Bar and clicking on "Baz" should redirect to https://youtube.com/@Baz.

Bootstrap Academy username

Morpheus

Contact Details

[email protected]

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

Months are not translated in the profile page https://bootstrap.academy/profile

Acceptance criteria

• When visiting the profile, the months should be translated in the according language chosen by the user
• When editing the profile, the months should be translated in the according language chosen by the user

Bootstrap Academy username

maximgofman

Description

Title for the Landing Page Instead of "bootstrap.academy > Bootstrap Academy"

Bootstrap Academy username

Morpheus

Description

Feature: User-Generated Matchings Creation

Objective:

To democratize content creation on bootstrap.academy, we aim to enable users (meeting the level requirement) to craft matchings for specific lectures or skills. This feature would be in line with the existing ability to create Multiple Choice Questions. The backend APIs are already in place for this.

Functionality:

• Creation Interface:

  • Enhance the "Create Task" button next to each lecture or skill to present an additional option, "Create Matching", alongside the pre-existing "Create Quiz" option.
  • Design an interface that prompts users, upon selecting "Create Matching", to input items and their corresponding matches.
  • Incorporate flexibility so users can introduce as many matching pairs as they deem necessary for the exercise.

• Database Integration:

  • Configure the backend to process and store the data when a user finalizes a matching exercise. This data should be associated with the specific lecture or skill in the database.

• Design & Styling:

  • Ensure the interface for matching creation harmonizes with the website's existing design aesthetics.

User Flow for Creation:

• Upon navigating to a particular lecture or skill, users should find and be able to click the "Create Task" button.

• Within the "Create Task" options, users should spot and be able to select the "Matching" option.

• A user-friendly interface should allow users to input items and their corresponding matches for the matching exercise.

• Post the addition of all required pairs, users should have a clear method to submit the matching.

• Once submitted, the database should store the matching, making it accessible for the wider user base to engage with and solve.

Dependencies:

• Ensure that the new feature integrates seamlessly with the existing task creation functionalities and the platform's tech stack.

Notes:

• Prioritize user-friendliness in the creation interface, ensuring that the process is intuitive and straightforward. This will encourage more users to contribute to content creation.

What browsers are you seeing the problem on?

Firefox, Chrome

What happened?

The calendar does not display weekdays as shown in the picture. Instead, it just displays "Day" – even though it should show Monday through Sunday. This issue arises when the browser width is too narrow to display the content adequately. The font size should be adjusted accordingly.

Acceptance criteria

• The calendar should display the weekdays (Monday to Sunday) or Mo, Di, Mi, ... instead of just "Day".
• Adjust the font size, font or layout to ensure visibility on narrow browser widths.
• Ensure compatibility across different browsers and screen sizes.

This service is responsible for converting the skill level of the user into an estimated time investment for each skill.

Functional Requirements:

• Data Retrieval: The service must interface with the User Profile Microservice to fetch the user's current skill levels from the database.
• Conversion Logic: Implement a mechanism that translates a user's skill level into an estimated time investment. The formula or conversion factor should be adjustable to refine based on accuracy feedback over time.
• Data Updating: Post conversion, this estimated time data should be stored back in the user's profile within the database. This necessitates interfacing with the User Profile Microservice.

Non-Functional Requirements:

• Performance: Ensure the service is optimized for rapid response times to maintain a seamless user experience.
• Reliability: The service must consistently yield accurate and reliable results.
• Scalability: Design the service with scalability in mind, allowing it to handle increased loads as the user base expands.

Acceptance Criteria:

• Accurately convert user skill levels to a representative measure of time spent learning or practicing that skill.
• Maintain consistent conversion across all skill types.
• Dynamically update the estimated time as users' skill levels change.
• Successfully integrate with user profiles to fetch skill level data in real-time.

Dependencies:

• None for this component. However, subsequent components (like the PDF Export Microservice) will depend on the successful completion of this component.

Notes:

• As this is the initial phase, there are no UI/UX mockups. After discussions and approvals on this issue, designers will create relevant mockups.
• The database schemas are pre-established. Any interactions or modifications must align with the current setup.

Bootstrap Academy username

DragonDev1906

Contact Details

No response

What browsers are you seeing the problem on?

Firefox, Other (please specify below)

What happened?

Firefox:

Warnung für quellübergreifende (Cross-Origin) Anfrage: Die Gleiche-Quelle-Regel wird das Lesen der externen Ressource auf https://api.bootstrap.academy/shop/premium/94f1ad92-99ec-4572-8954-61792ea75f80 bald verbieten. (Grund: Wenn 'Access-Control-Allow-Headers' den Wert '*' hat, wird die 'Authorization'-Kopfzeile nicht eingeschlossen. Um die 'Authorization'-Kopfzeile einzuschließen, muss sie explizit in der CORS-Kopfzeile 'Access-Control-Allow-Headers' aufgeführt werden).

Brave

As far as I know this is not a problem, yet, but will likely result in the API requests and thus the entire website might not be working once this change is implemented in the respective browsers.

Bootstrap Academy username

JL97

Contact Details

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

What happened?

The Tooltips for the Event Type Filter in the Calendar Page overlap the Modal for an upcoming Event.

Feature: Skill and Subskill Bookmarking on the Skilltree

Objective:

To facilitate users in their learning journey, we aim to introduce a bookmarking feature for skills and subskills within the Skilltree. This feature would enable users to prioritize specific skills and revisit them with ease.

Functional Requirements:

• User Authentication: Prioritize user experience by ensuring they're logged in before they can engage with the bookmarking feature. If a user attempts to bookmark without being logged in, prompt them to sign in or register.
• Bookmarking Mechanism:
  • Implement a bookmark icon adjacent to each skill and subskill.
  • Allow users to activate a bookmark by clicking the icon. Clicking it again should deactivate the bookmark.
  • In cases where a subskill gets bookmarked, its parent skill should reflect as bookmarked too. Conversely, unbookmarking the parent should unbookmark all associated subskills.
  • If all subskills are unbookmarked, also unbookmark the parent subskill automatically
• Visual Indicators:
  • Bookmarked Skill/Subskill: Mark these with a distinct yellow hue in the tree and a visibly active bookmark icon within the node.
• Persistence:
  • Ensure that every bookmark action (bookmarking/unbookmarking) updates the database in real-time.
  • Design the system to remember bookmarks across sessions, devices, and even after cookie deletion.
• User Feedback: Integrate a subtle animation for the bookmark icon to offer visual feedback when a user bookmarks or removes a bookmark.

Acceptance Criteria:

• Users should be able to effortlessly bookmark or unbookmark a skill/subskill via the bookmark icon.
• Bookmarked skills and subskills should be easily distinguishable by their yellow coloration and the activated bookmark icon.
• Bookmarking a subskill should also bookmark its parent skill. However, unbookmarking the parent skill should lead to the unbookmarking of all its child subskills.
• All bookmark actions should be reflected in the database, ensuring persistence across sessions, platforms, and devices.
• The bookmark icon should showcase a gentle animation when a skill or subskill undergoes the bookmarking or unbookmarking process.

Dependencies:

• None for this feature. The foundational Skilltree, along with its skills and subskills, are already implemented.

Notes:

• It's imperative that the bookmarking mechanism is intuitive and the visual feedback is immediate to ensure a seamless user experience.

Bootstrap Academy username

DragonDev1906

Contact Details

No response

What browsers are you seeing the problem on?

Other (please specify below)

What happened?

Browser: Brave Version 1.58.137 Chromium: 117.0.5938.153 (Official Build) (64-bit)

When clicking the profile icon (top right, blue/white circle) the navigation dropdown is not visible. The same happens on smaller screens with the burger menu.
Note that there are other things that don't work correctly or differ between the two browsers:

• Firefox shows a circle with an Education hat in the bottom right, Brave doesn't.
• Firefox shows Bestätige deine E-Mail-Adresse, um auf die Bestenliste zuzugreifen when visiting the leader-board, Brave does not.
• Maybe this issue has the same root cause: #46

Actual behavior

Firefox: Shows dropdown with 6 entries on click
Brave: Nothing visible happens but a new element is created in the DOM (see screenshots)

Expected behavior

Both browsers should display the dropdown, without it navigating the site becomes difficult.

Screenshots

Left: Brave
Right: Firefox

Before clicking:

After clicking (when the navigation should be open):

Problem

Currently only the frontend is aware of the language and timezone of the user. The problem here is that sometimes the backend also needs to know this information, for example in emails (at the moment emails are always in german and timestamps in emails are always in utc, which confuses some users).

Solution

The user should be able to configure their preferred language and timezone in their account settings. When sending an email, the backend should use the configured language and timezone. When creating an account, the language and timezone are automatically set to the values known to the browser.

Acceptance criteria

• For each user, the backend stores their preferred language and timezone.
• For existing users, these values default to german and Europe/Berlin.
• For new users, the values known to the browser are used.
• The user can change these values in their account settings.
• When sending an email to a user, the backend uses the configured language and timezone.

Some of the self-hosted videos don't seem to work properly in all browsers. Maybe this has been fixed lately by converting all videos to h264, but this definetly needs more testing and debugging.

This is a list of courses which contain self-hosted videos:

• https://bootstrap.academy/courses/pentesting_grundlagen
• https://bootstrap.academy/courses/nmap
• https://bootstrap.academy/courses/password_cracking
• https://bootstrap.academy/courses/python_hacking
• https://bootstrap.academy/courses/schwachstellen_web_anwendungen

For everyone who has intel on this issue - if it works or if the issue persists, please comment down below, so we can gather more info on what this is all about. We can award you for that with small amounts of MorphCoin and can get a better grasp on the problem.

Currently we are using Gravatar to allow users to set a profile picture / avatar. The aim of this ticket is to allow users to upload their desired avatar directly in their profile settings. The image is then uploaded and stored on the server and can be retrieved by anyone using the id of the corresponding user. Only the last uploaded image is stored on the server, so if a user uploads a new avatar, the old one is deleted from the server. If a user has not uploaded a profile picture or has deleted a previously uploaded one, then a default profile picture based on the user id is generated locally in the frontend (for example by using something like jdenticon).

Acceptance criteria

• Users can upload a profile picture in their profile settings.
  • Only png and jpg files can be uploaded.
  • There is a maximum file size of 4MB (configurable).
  • Uploading a new avatar deletes any previously uploaded avatar of this user from the server.
• Everywhere a gravatar was displayed in the frontend, it is now replaced by the profile picture uploaded by the corresponding user.
  • If the user has not uploaded any profile picture yet (or has deleted it), a default profile picture is generated locally in the frontend and displayed instead. This default avatar should be unique to the user's id and is never uploaded to the server, it is only displayed locally.
• Users can delete their profile picture in the profile settings to revert to the default profile picture.
• In the admin dashboard, also replace any gravatars by the new profile pictures.
• In the admin dashboard, admins can remove the profile picture of any user to revert it to the default avatar.

Webinar entries in the calendar are currently lacking a lot of information (even the description is not displayed). When clicking on the event summary on the bottom right of the page under "Upcoming Events", a dialog should open which contains all relevant information about the webinar.

Acceptance criteria

• When clicking on the webinar summary, a dialog should open, containing the following information:
  • Name
  • Description
  • Skill and parent skill (both with links to the skill tree)
  • Start and end timestamps (and duration)
  • Price
  • Instructor name, avatar and rating
  • Link (if the user has access to the link)
  • Admin link (if the user has access to the admin link)
  • Timestamp when this webinar has been created
  • Number of registered participants and maximum capacity
  • A button to book the webinar (if it is bookable)
• In the webinar summary itself, display the skill name instead of its id.